@import './reset';

.match-dialog-mask{
	position: fixed;
	background: rgba(0,15,25,.6);
	z-index: 200;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: none;
	.match-dialog{
		position: absolute;
		bottom: calculateRem(10px);
		left: calculateRem(10px);
		right: calculateRem(10px);

		border-radius: calculateRem(13px);
		height: calculateRem(234px);
		background: white;
		box-sizing: border-box;
		padding: calculateRem(10px);
		>h3{
			margin: 0;
			text-align: center;
			font-size: calculateRem(20px);
			color: #333;
			margin-top: calculateRem(18px);
		}
		>p{
			font-size: calculateRem(16px);
			color: #4b4b4b;
			text-align: center;
			@include break;
			line-height: calculateRem(24px);
			margin: 0;
			margin-top: calculateRem(14px);
			>i{
				font-style: normal;
				font-weight: bold;
				color: #fe6f37;
				margin-left: calculateRem(8px);
			}

		}
		.btns-wrap{
			position: absolute;
			height: calculateRem(50px);
			left: calculateRem(10px);
			right: calculateRem(10px);
			bottom: calculateRem(10px);
			>a{
				display: inline-block;
				height: calculateRem(50px);
				font-size: calculateRem(20px);
				color: #FFFFFF;
				text-align: center;
				line-height: calculateRem(50px);
				outline: none;
				border-radius: calculateRem(5px);
				font-weight: bold;
			}
			.retest{
				background: #D8E5F5;
				width: 35%;
				color: #595959;
				float: left;
				&:active{
					background: #eee;
				}
			}
			.buy{
				background: #FFC914;
				width: 63%;
				float: right;
				color: black;
				&:active{
					background: #eac035;
				}
			}
		}

		.close-btn{
			width: calculateRem(32px);
			height: calculateRem(32px);
			position: absolute;
			top: calculateRem(-47px);
			right: calculateRem(15px);
			border-radius: 50%;
			&:acitve{
				background: rgba(0,15,25,.4);
			}
			&:after{
				content: '';
				display: block;
				width: 2px;
				height: calculateRem(15px);
				background: rgba(255,255,255,.6);
				position: absolute;
				bottom: calculateRem(-15px);
				left: calculateRem(15px);
			}
			>img{
				width: 100%;
				height: 100%;
			}
		}
	}

}


.retest-dialog-mask{
	position: fixed;
	background: rgba(0,15,25,.6);
	z-index: 200;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: none;
	.retest-dialog{
		position: absolute;
		bottom: calculateRem(10px);
		left: calculateRem(10px);
		right: calculateRem(10px);

		border-radius: calculateRem(13px);
		height: calculateRem(224px);
		background: white;
		box-sizing: border-box;
		padding: calculateRem(10px);
		>h3{
			margin: 0;
			text-align: center;
			font-size: calculateRem(20px);
			color: #333;
			margin-top: calculateRem(18px);
		}
		>p{
			font-size: calculateRem(16px);
			color: #4b4b4b;
			text-align: center;
			@include break;
			line-height: calculateRem(24px);
			margin: 0;
			margin-top: calculateRem(14px);
			>i{
				font-style: normal;
				font-weight: bold;
				margin-left: calculateRem(8px);
			}

		}
		.start-retest{
			position: absolute;
			left: calculateRem(10px);
			right: calculateRem(10px);
			bottom: calculateRem(10px);
			display: block;
			height: calculateRem(50px);
			border-radius: calculateRem(5px);
			color: black;
			font-size: calculateRem(20px);
			text-align: center;
			line-height: calculateRem(50px);
			background: #FFC914;
			font-weight: bold;
			&:active{
				background: #eac035;
			}
		}

		.close-btn{
			width: calculateRem(32px);
			height: calculateRem(32px);
			position: absolute;
			top: calculateRem(-47px);
			right: calculateRem(15px);
			border-radius: 50%;
			&:acitve{
				background: rgba(0,15,25,.4);
			}
			&:after{
				content: '';
				display: block;
				width: 2px;
				height: calculateRem(15px);
				background: rgba(255,255,255,.6);
				position: absolute;
				bottom: calculateRem(-15px);
				left: calculateRem(15px);
			}
			>img{
				width: 100%;
				height: 100%;
			}
		}
	}

}


.test-dialog-mask{
	position: fixed;
	background: rgba(0,15,25,.6);
	z-index: 200;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: none;
	.test-dialog{
		position: absolute;
		bottom: calculateRem(10px);
		left: calculateRem(10px);
		right: calculateRem(10px);

		border-radius: calculateRem(13px);
		height: calculateRem(204px);
		background: white;
		box-sizing: border-box;
		padding: calculateRem(10px);
		>h3{
			margin: 0;
			text-align: center;
			font-size: calculateRem(20px);
			color: #333;
			margin-top: calculateRem(18px);
		}
		>p{
			font-size: calculateRem(16px);
			color: #4b4b4b;
			text-align: center;
			@include break;
			line-height: calculateRem(24px);
			margin: 0;
			margin-top: calculateRem(14px);

		}
		.start-test{
			position: absolute;
			left: calculateRem(10px);
			right: calculateRem(10px);
			bottom: calculateRem(10px);
			display: block;
			height: calculateRem(50px);
			border-radius: calculateRem(5px);
			color: black;
			font-size: calculateRem(20px);
			text-align: center;
			line-height: calculateRem(50px);
			background: #FFC914;
			font-weight: bold;
			&:active{
				background: #eac035;
			}
		}
		.close-btn{
			width: calculateRem(32px);
			height: calculateRem(32px);
			position: absolute;
			top: calculateRem(-47px);
			right: calculateRem(15px);
			border-radius: 50%;
			&:after{
				content: '';
				display: block;
				width: 2px;
				height: calculateRem(15px);
				background: rgba(255,255,255,.6);
				position: absolute;
				bottom: calculateRem(-15px);
				left: calculateRem(15px);
			}
			>img{
				width: 100%;
				height: 100%;
			}
		}
	}

}



.nomatch-dialog-mask{
	position: fixed;
	background: rgba(0,15,25,.6);
	z-index: 200;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: none;
	.nomatch-dialog{
		position: absolute;
		bottom: calculateRem(10px);
		left: calculateRem(10px);
		right: calculateRem(10px);

		border-radius: calculateRem(13px);
		height: calculateRem(234px);
		background: white;
		box-sizing: border-box;
		padding: calculateRem(10px);
		>h3{
			margin: 0;
			text-align: center;
			font-size: calculateRem(20px);
			color: #333;
			margin-top: calculateRem(18px);
		}
		>p{
			font-size: calculateRem(16px);
			color: #4b4b4b;
			text-align: center;
			@include break;
			line-height: calculateRem(24px);
			margin: 0;
			margin-top: calculateRem(14px);
			>i{
				font-style: normal;
				font-weight: bold;
				color: #fe6f37;
				margin-left: calculateRem(8px);
			}

		}
		.restart-test{
			position: absolute;
			left: calculateRem(10px);
			right: calculateRem(10px);
			bottom: calculateRem(10px);
			display: block;
			height: calculateRem(50px);
			border-radius: calculateRem(5px);
			color: black;
			font-size: calculateRem(20px);
			text-align: center;
			line-height: calculateRem(50px);
			background: #FFC914;
			font-weight: bold;
			&:active{
				background: #eac035;
			}
		}

		.close-btn{
			width: calculateRem(32px);
			height: calculateRem(32px);
			position: absolute;
			top: calculateRem(-47px);
			right: calculateRem(15px);
			border-radius: 50%;
			&:acitve{
				background: rgba(0,15,25,.4);
			}
			&:after{
				content: '';
				display: block;
				width: 2px;
				height: calculateRem(15px);
				background: rgba(255,255,255,.6);
				position: absolute;
				bottom: calculateRem(-15px);
				left: calculateRem(15px);
			}
			>img{
				width: 100%;
				height: 100%;
			}
		}
	}

}